<template>
  <el-drawer
    v-model="appStore.isShowProfile"
    :direction="appStore.isMobile ? 'ttb' : 'rtl'"
    :lock-scroll="true"
    :size="appStore.isMobile ? '70%' : '30%'"
  >
    <template #header> 个人中心 </template>
    <template #default>
      <div class="main">
        <el-image
          class="avatar"
          :src="info.avatar_url"
          :preview-src-list="[info.avatar_url]"
        >
        </el-image>
        <div class="tips">
          <el-upload
            ref="upload"
            action="#"
            :auto-upload="false"
            :limit="1"
            :on-exceed="handleExceed"
            :http-request="uploadAction"
            :before-upload="beforeUpload"
            :on-change="onUpload"
          >
            <template #default>
              <svg class="icon light" aria-hidden="true">
                <use xlink:href="#icon-geren"></use>
              </svg>
              <span>Tips: 点我可以更换头像~</span>
            </template>
          </el-upload>
        </div>
      </div>
      <div class="info">
        <el-form status-icon label-width="60px" :model="info">
          <el-form-item label="昵称">
            <el-input
              v-model="info.user_nickname"
              type="text"
              autocomplete="off"
              placeholder="自定义你的昵称~"
            />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="info.user_describe"
              type="text"
              autocomplete="off"
              placeholder="关于你自己~"
            />
          </el-form-item>
          <el-form-item label="个人">
            <el-input
              v-model="info.website"
              type="text"
              autocomplete="off"
              placeholder="你的个人网站~"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
  import { reactive, ref, onBeforeMount } from 'vue'
  import { genFileId } from 'element-plus'
  import { updateProfileRequest, uploadAvatarRequest } from '@/network/api/user'
  import { localCache } from '@/utils/cache'
  import { queryUserInfoRequest } from '@/network/api/user'
  import Message from 'vue-m-message'
  import useAppStore from '@/store/appStore'
  import useUserStore from '@/store/userStore'

  const appStore = useAppStore()
  const userStore = useUserStore()
  const info = reactive({
    user_nickname: null,
    user_describe: null,
    website: null,
    avatar_url: null,
  })
  const upload = ref(null)
  onBeforeMount(async () => {
    const result = await queryUserInfoRequest(localCache.getCache('user').id)
    info.user_nickname = result.result.user_nickname
    info.user_describe = result.result.user_describe
    info.website = result.result.website
    info.avatar_url = result.result.avatar_url + '?' + Math.random()
  })
  // 上传类型和大小限制
  const beforeUpload = rawFile => {
    const type = ['image/jpeg', 'image/jpg', 'image/png']
    if (type.indexOf(rawFile.type) === -1) {
      Message.warning('图片类型必须是以下格式：JPG/JPEG/PNG format!')
      return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
      Message.error('图片大小不能超过 5MB!')
      return false
    }
    return true
  }
  const handleExceed = files => {
    upload.value.clearFiles()
    const file = files[0]
    file.uid = genFileId()
    upload.value.handleStart(file)
  }
  // 上传事件
  const uploadAction = async param => {
    // console.log('在这里上传')
    const { file } = param
    const formData = new FormData()
    formData.append('avatar', file)
    const result = await uploadAvatarRequest(formData)
    info.avatar_url = result.result.avatar_url + '?' + Math.random()
    localCache.setCache('avatar', info.avatar_url)
    userStore.avatarChanged()
    Message.success(result.msg)
  }
  const onUpload = () => {
    upload.value.submit()
  }
  const onSubmit = async () => {
    const result = await updateProfileRequest(info)
    localCache.setCache('nickname', info.user_nickname)
    userStore.nicknameChanged()
    Message.success(result.msg)
  }
  const onReset = () => {
    info.user_nickname = null
    info.user_describe = null
    info.website = null
  }
</script>

<style scoped lang="less">
  @media only screen and (min-width: 991px) {
    .main {
      display: flex;
      flex-direction: column;
      align-items: center;
      .avatar {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        overflow: hidden;
      }
      .tips {
        margin: 20px 0;
        span {
          margin-left: 12px;
          font-size: 14px;
          color: var(--text-a);
          cursor: pointer;
        }
      }
    }

    .info {
      width: 100%;
      .el-form {
        margin-right: 30px;
      }
    }
  }
  @media only screen and (max-width: 990px) {
    .main {
      display: flex;
      flex-direction: column;
      align-items: center;
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
      }
      .tips {
        margin: 10px 0;
        span {
          margin-left: 12px;
          font-size: 12px;
          color: var(--text-a);
          cursor: pointer;
        }
      }
    }

    .info {
      width: 100%;
      .el-form {
        margin-right: 30px;
      }
    }
  }
</style>
